<template>
    <li :class="cns" ref="eli">
        <slot></slot>
    </li>
</template>
<script lang="ts">
import { computed, defineComponent, inject, Ref, ref } from 'vue'

export default defineComponent({
    setup(props,{expose}) {
        const align = inject<Ref<string>>("align")
        const eli = ref<{[k:string]:string}>({})
        const cns = computed(()=>{
            return {
                'ph-list-item':true,
                'ph-text-center':align&&align.value==='center'
            }
        })
        expose({
            getText:()=>eli.value.innerText
        })
        return {eli,cns}
    },
})
</script>

<style lang="scss">
.ph-list-item{
    padding:var(--ph-8) var(--ph-15);
    border-bottom: 1px solid var(--ph-bd-light);
    background-color: transparent;
    transition: background-color .3s ease;
    width: 100%;
    &:hover{
        background-color: var(--ph-light-l1);
        color: var(--ph-c-d1);
    }
    &:last-child{
        border-bottom: none;
    }
}
</style>